<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered='false'>
    <a-form @submit='handleSubmit' :form='form'>
      <a-form-item
        label='项目名称'
        :labelCol='{lg: {span: 7}, sm: {span: 7}}'
        :wrapperCol='{lg: {span: 10}, sm: {span: 17} }'>
        <a-input
          name='name'
          disabled='disabled'
          v-model='detail.projectName'
          v-decorator="[
            'projectName',
            {
              initialValue: detail.projectName, // 设置初始值的参数
            },
          ]" />
      </a-form-item>
      <a-form-item
        label='承担单位'
        :labelCol='{lg: {span: 7}, sm: {span: 7}}'
        :wrapperCol='{lg: {span: 10}, sm: {span: 17} }'>
        <a-input
          name='unit'
          disabled='disabled'
          v-model='detail.unit'
          v-decorator="[
            'unit',
            {
              initialValue: detail.unit, // 设置初始值的参数
            },
          ]" />
      </a-form-item>
      <a-form-item
        label='项目来源'
        :labelCol='{lg: {span: 7}, sm: {span: 7}}'
        :wrapperCol='{lg: {span: 10}, sm: {span: 17} }'>
        <a-input
          name='projectSource'
          disabled='disabled'
          v-model='detail.projectSource'
          v-decorator="[
            'projectSource',
            {
              initialValue: detail.projectSource, // 设置初始值的参数
            },
          ]" />
      </a-form-item>
      <a-form-item
        label='课题负责人'
        :labelCol='{lg: {span: 7}, sm: {span: 7}}'
        :wrapperCol='{lg: {span: 10}, sm: {span: 17} }'>
        <a-input
          name='manager'
          disabled='disabled'
          v-model='detail.manager'
          v-decorator="[
            'manager',
             {
              initialValue: detail.manager, // 设置初始值的参数
            },
          ]" />
      </a-form-item>
      <a-form-item
        label='项目周期'
        :labelCol='{lg: {span: 7}, sm: {span: 7}}'
        :wrapperCol='{lg: {span: 10}, sm: {span: 17} }'>
        <a-range-picker
          name='cycleTime'
          v-model='detail.cycleTime'
          disabled='disabled'
          style='width: 100%'
          v-decorator="[
            'cycleTime',
          ]" />
      </a-form-item>
      <a-form-item
        label='上传立项阶段文档'
        :labelCol='{lg: {span: 7}, sm: {span: 7}}'
        :wrapperCol='{lg: {span: 10}, sm: {span: 17} }'>
        <a-upload-dragger
          name='start'
          :multiple='true'
          :before-upload='beforeUpload'
          :custom-request='customRequest'
          @change='handleChange'
        >
          <p class='ant-upload-drag-icon'>
            <a-icon type='inbox' />
          </p>
          <p class='ant-upload-text'>
            点击或将文件拖拽到这里上传
          </p>
          <p class='ant-upload-hint'>
            支持扩展名：.rar .zip .doc .docx .pdf .jpg..
          </p>
        </a-upload-dragger>
      </a-form-item>
      <!--      <a-form-item-->
      <!--        :label="$t('archivesForm.upload.end')"-->
      <!--        :labelCol="{lg: {span: 7}, sm: {span: 7}}"-->
      <!--        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">-->
      <!--        <a-upload-dragger-->
      <!--          name="end"-->
      <!--          :multiple="true"-->
      <!--          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
      <!--          @change="handleChange"-->
      <!--        >-->
      <!--          <p class="ant-upload-drag-icon">-->
      <!--            <a-icon type="inbox" />-->
      <!--          </p>-->
      <!--          <p class="ant-upload-text">-->
      <!--            {{ $t('archivesForm.upload.placeholder') }}-->
      <!--          </p>-->
      <!--          <p class="ant-upload-hint">-->
      <!--            {{ $t('archivesForm.upload.support') }}-->
      <!--          </p>-->
      <!--        </a-upload-dragger>-->
      <!--      </a-form-item>-->
      <!--      <a-form-item-->
      <!--        :label="$t('archivesForm.upload.check')"-->
      <!--        :labelCol="{lg: {span: 7}, sm: {span: 7}}"-->
      <!--        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">-->
      <!--        <a-upload-dragger-->
      <!--          name="check"-->
      <!--          :multiple="true"-->
      <!--          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
      <!--          @change="handleChange"-->
      <!--        >-->
      <!--          <p class="ant-upload-drag-icon">-->
      <!--            <a-icon type="inbox" />-->
      <!--          </p>-->
      <!--          <p class="ant-upload-text">-->
      <!--            {{ $t('archivesForm.upload.placeholder') }}-->
      <!--          </p>-->
      <!--          <p class="ant-upload-hint">-->
      <!--            {{ $t('archivesForm.upload.support') }}-->
      <!--          </p>-->
      <!--        </a-upload-dragger>-->
      <!--      </a-form-item>-->
    </a-form>
  </a-card>
</template>

<script>
import { upload, update } from '@/api/projectInitApply'
import moment from 'moment'

export default {
  name: 'Archives',
  props: {
    detail: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      dateFormat: 'YYYY-MM-DD',
      fileId: ''
    }
  },
  mounted() {
    let data = localStorage.getItem('basicInfo')
    if (data) {
      data = JSON.parse(data)
      this.$nextTick(() => {
        console.log(data)
        this.form.setFieldsValue({
          projectName: data.projectName,
          unit: data.unit,
          projectSource: data.projectSource,
          manager: data.manager,
          cycleTime: data.cycleTime
        })
      })
    }
  },
  computed: {
    // 格式化日期为适用于 a-range-picker 的值

  },
  methods: {
    moment,
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    beforeUpload(file) {
      // 在上传之前的操作，可以在这里对文件进行校验等操作
      console.log('Before Upload:', file)
      return true // 返回 true 表示允许上传，返回 false 表示禁止上传
    },
    customRequest({ file, onSuccess, onError }) {
      // 自定义上传请求
      const formData = new FormData()
      formData.append('file', file)
      // formData.append('path', file.name)
      upload(formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res)
        // this.detail.fileIds = this.detail.fileIds + ',' + res
        this.fileId = res.data
        onSuccess()
      })

    },
    handleChange(info) {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`)
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    }
  }
}
</script>

<style>

</style>
